<template>
  <div class="view-affix">
    <fx-card title="基础用法">
      <fx-affix :offset="100" scroll-target=".view-affix" @change="baseChange">
        <fx-button type="primary" size="large">固定顶部100px</fx-button>
      </fx-affix>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="指定固定容器">
      <div class="affix-container">
        <fx-affix :offset="150" target=".affix-container" scroll-target=".view-affix">
          <fx-button type="primary" size="large">指定固定元素顶部150px</fx-button>
        </fx-affix>
      </div>
      <template #hide>
        <pre v-highlight="target"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="固定底部">
      <fx-affix :offset="60" position="bottom" scroll-target=".view-affix">
        <fx-button type="primary" size="large">固定底部00px</fx-button>
      </fx-affix>
      <template #hide>
        <pre v-highlight="position"><code></code></pre>
      </template>
    </fx-card>
    <div class="box"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { FxMessage } from '@/base'

export default defineComponent({
  name: 'viewAffix',
  setup () {
    const baseChange = (val: boolean) => {
      FxMessage({
        type: 'success',
        message: '固定顶部100px' + '<em style="color: ' + (val ? 'blue' : 'red') + ';margin-left: 15px;">' + (val ? '开始' : '结束') + '</em>',
        isHTML: true
      })
    }

    const base = `<fx-affix :offset="100" scroll-target=".view-affix" @change="baseChange">
  <fx-button type="primary" size="large">固定顶部100px</fx-button>
</fx-affix>
export default defineComponent({
  setup() {
    const baseChange = (val: boolean) => {
      FxMessage({
        type: 'success',
        message: '固定顶部100px' + '<em style="color: ' + val ? 'blue' : 'red' + ';margin-left: 15px;">' + (val ? '开始' : '结束') + '</em>',
        isHTML: true
      })
    }
  }
})`
    const target = `<div class="affix-container">
  <fx-affix :offset="150" target=".affix-container" scroll-target=".view-affix">
    <fx-button type="primary" size="large">指定固定元素顶部150px</fx-button>
  </fx-affix>
</div>`
    const position = `<fx-affix :offset="60" position="bottom" scroll-target=".view-affix">
  <fx-button type="primary" size="large">固定底部00px</fx-button>
</fx-affix>`

    return {
      base,
      target,
      position,
      baseChange
    }
  }
})
</script>

<style scoped lang="scss">
.view-affix {
  .box {
    height: 800px;
  }

  .affix-container {
    height: 1000px;
    background-color: #ecf5ff;
    text-align: center;
  }
}
</style>
